<template>
	<view class="bg-white">
		<u-sticky>
			<view class="bg-white">
				<view class="px-2 py-1">
					<search-view :search-val="searchVal" color="#163566" placeholder="企业名称/编号" @search="searchChange" @clear="searchChange('')"></search-view>
				</view>
			</view>
		</u-sticky>
		<view class="head_img_warp">
			<image :src="infoCont.activity_img_6" style="width: 100%; height: 330rpx;" mode="aspectFill"></image>
			<view class="state font-sm text-center w-100">{{ infoCont.status_name }}</view>
		</view>
		<view class="search_cont container" v-for="(child, index) of cupCompany" :key="index">
			<view class="rank_tit font my-4 flex align-center justify-center">{{ child.title }}</view>
			<view class="mt-1 flex flex-wrap bg-white">
				<view
					class="company_cup rounded p-1 text-center mb-2"
					v-for="item of child.list"
					:key="item.id"
					@click="goPages('/subPages/my/gnb_vote/vote_detail?prize_id=' + item.prize_id + '&company_id=' + item.id + '&activityId=' + activityId)"
				>
					<view class="text-right font-small flex justify-end align-center">
						<image src="@/static/img2/home/cup_num.png" mode="aspectFit"></image>
						{{ item.id }}
					</view>
					<view class="logo font-sm py-2"><image :src="item.company_logo" mode="aspectFill"></image></view>
					<view class="font text_hidden1 mt-2">{{ item.company_name }}</view>
					<view class="font_22 c_9 mt-2 text_hidden1">{{ item.company_slogan }}</view>
					<view class="font_24 mt-2">当前票数：{{ item.num }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import searchView from '@/components/search/search.vue';
import { voteActivityDetil, voteCheckCompany } from '@/api/my/gnb_apply.js';
export default {
	components: { searchView },
	data() {
		return {
			infoCont: {},
			searchVal: '',
			activityId: '',
			cupCompany: []
		};
	},
	onLoad(option) {
		this.searchVal = option.searchVal;
		this.activityId = option.activityId;
		this.info();
		if (this.searchVal) {
			this.searchChange();
		}
	},
	methods: {
		info() {
			voteActivityDetil({ activity_id: this.activityId }).then(res => {
				if (res.code == 0) {
					this.infoCont = res.data;
				} else {
					uni.$u.toast(re.msg);
				}
			});
		},
		searchChange() {
			let msg = {
				kw: this.searchVal,
				activity_id: this.activityId,
				uid: uni.getStorageSync('userInfo').userId
			};
			voteCheckCompany(msg).then(res => {
				// console.log(res);
				if (res.code == 0) {
					let data = res.data;
					let listbox = [];
					data.forEach((item, index) => {
						let list = [];
						return res.data.filter(child => {
							if (child.prize_id == item.prize_id) {
								list.push(item);
								listbox.push({
									title: item.prize_title,
									list: list
								});
								return listbox;
							}
						});
					});
					const map = new Map();
					this.cupCompany = listbox.filter(i => !map.has(i.title) && map.set(i.title, 1));
				} else {
					uni.$u.toast(res.msg);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.head_img_warp {
	position: relative;
	.state {
		color: #ffe0a7;
		position: absolute;
		bottom: 50rpx;
	}
}
.company_cup {
	width: calc((100% / 2) - 11rpx);
	min-height: 320rpx;
	border: 1px solid #163566;
	color: #163566;
	.text-right {
		image {
			width: 35rpx;
			height: 35rpx;
			margin-right: 5rpx;
		}
	}
	.logo {
		width: 150rpx;
		border: 1px solid #163566;
		border-radius: 40rpx;
		margin: 0 auto;
		image {
			width: 145rpx;
			height: 30rpx;
		}
	}
}
.company_cup:nth-child(even) {
	margin-left: 20rpx;
}
.rank_tit::before,
.rank_tit::after {
	content: '';
	background: url('@/static/img2/home/cup_titi.png') no-repeat;
	background-size: 100%;
	width: 30rpx;
	height: 30rpx;
	display: inline-table;
	margin: 0 10rpx;
}
</style>
